<template>
    <div class="login-container">
        <!-- 左侧插画区域 -->
        <div class="left-section">
            <div class="logo">
                <h1>云梦科技</h1>
            </div>
            <div class="illustration">
            </div>
        </div>

        <!-- 右侧登录表单区域 -->
        <div class="right-section">
            <div class="login-form">
                <div class="welcome-text">
                    <h1>云梦智慧教育平台</h1>
                    <h2>找回密码</h2>
                </div>
                <el-form ref="formObj" :model="pwdform" :rules="rules" style="margin-top: 50px;padding: 0 30px ; max-width: 600px; ">
                    <el-form-item prop="email">
                        <el-input :prefix-icon="User" v-model="pwdform.email" placeholder="请输入电子邮箱" size="large"></el-input>
                    </el-form-item>
                    <el-form-item prop="code">
                        <el-input style="width: 225px; margin-right: 10px;" :prefix-icon="CircleCheck"
                            v-model="pwdform.code" placeholder="请输入验证码" size="large"></el-input>
                        <el-button :disabled="isCountingDown" type="primary" plain @click="sendCode"
                            style="width: 100px;" size="large">
                            {{ isCountingDown ? `${countdown}s后再发送` : '发送验证码' }}
                        </el-button>
                    </el-form-item>
                    <el-form-item style="margin-top: 70px;">
                        <el-button style="width: 150px;" plain type="primary" @click="find" size="large">找回</el-button>
                        <el-button style="width: 150px;position: absolute; right: 0;" plain type="primary"
                            @click="$router.push('/')" size="large">回到登录</el-button>
                    </el-form-item>
                </el-form>
                <el-dialog v-model="dialog.show" :close-on-click-modal="false" align-center center title="修改密码"
                    style="width: 400px;height: 200px;">
                    <el-form ref="formObj2" :model="saveform" :rules="rules2">
                        <el-form-item prop="password">
                            <el-input :prefix-icon="Lock" placeholder="请输入新密码" v-model="saveform.password"
                                show-password></el-input>
                        </el-form-item>
                        <el-form-item prop="repass">
                            <el-input :prefix-icon="Check" placeholder="请确认密码" v-model="saveform.repass"
                                show-password></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button style="position: absolute;right: 0%; margin-top: 20px;" type="primary" plain
                                @click="save">确认</el-button>
                        </el-form-item>
                    </el-form>
                </el-dialog>

                <div class="copyright">
                    <p>Copyright © 2024 Yunmeng 云梦科技</p>
                    <p>辽ICP备14003114号-8 🔗 辽公网安备 21021102000773号 工业和信息化部备案管理系统</p>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { User,CircleCheck,Lock,Check } from '@element-plus/icons-vue'
import { get,post } from '@/axios'
import { _axios } from '@/axios'
import { ref,reactive } from 'vue'
import router from '@/router'
const dialog = reactive({
	show:false
})
const pwdform=reactive({
	email:'',
	code:''
})
const saveform=reactive({
	password:'',
	repass:''
})
const formObj = ref()
const formObj2 = ref()
function check (rule, value, callback) {
	get("/umsAdmin/check",{id:null,value,field: rule.field },content => {
		if(!content){
			callback()
		}else{
			callback(new Error())
		}
	})
}
const rules = reactive({
	email:[
		{ required:true, message: '请输入电子邮箱', trigger:'blur' },
		{ type: 'email', message: '请输入正确的电子邮箱', trigger: 'blur' },
		{ validator: check, message: '该用户不存在', trigger: 'blur' }
	],
	code:[
		{ required:true, message: '请输入验证码', trigger:'blur' }
	]
})
const rules2 = reactive({
	password:[
		{ required:true, message: '请输入密码', trigger:'blur' }
	],
	repass:[
		{ required:true, message: '请再次输入密码', trigger:'blur' }
	]
})
const countdown = ref(60)  // 倒计时秒数
const isCountingDown = ref(false)  // 是否正在倒计时
function sendCode(){
	formObj.value.validateField(['email'],valid => {
		if(valid){
			post("/umsAdmin/sendCode",{email:pwdform.email},content => {
				ElMessage({
					message:'验证码已发送',
					type:'success'
				})
				startCountdown()
			})
		}else{
			ElMessage({
				message:'验证失败，该用户不存在',
				type:'error'
			})
		}
	})
}
function startCountdown() {
	isCountingDown.value = true
	countdown.value = 60
	const timer = setInterval(() => {
		countdown.value -= 1
		if(countdown.value <= 0){
			clearInterval(timer)
			isCountingDown.value = false
		}
	},1000)
}
function find(){
	formObj.value.validate(valid => {
		if(valid){
			post('/umsAdmin/checkCode',{ email:pwdform.email,code: pwdform.code},content => {
				if(content){
					dialog.show = true
				}else{
					ElMessage({
						message:'验证码错误或验证码已过期',
						type:'error'
					})
				}
			})
		}
	})
}
function save(){
	formObj2.value.validate(valid => {
		if(saveform.password === saveform.repass){
			const formData = new FormData()
			formData.append("email",pwdform["email"])
			formData.append("password",saveform["password"])
			_axios.request({
				url: '/umsAdmin/change',
				method: 'post',
				data:formData
			}).then(response => {
				ElMessage({
					message:'修改密码成功',
					type:'success'
				})
				dialog.show=false
				router.push({
					path:'/'
				})
			})
		}else{
			ElMessage({
				message:'两次密码输入必须一致',
				type:'error'
			})
		}
	})
}
</script>

<style scoped>
.login-container {
  display: flex;
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

/* 左侧插画区域 */
.left-section {
  flex: 3;
  position: relative;
  background: linear-gradient(135deg, #ffffff 0%, #74b9ff 50%, #a29bfe 100%);
  overflow: hidden;
}

.logo {
  position: absolute;
  top: 40px;
  left: 40px;
  z-index: 10;
}

.logo h1 {
  font-size: 32px;
  font-weight: bold;
  color: #2c5aa0;
  margin: 0;
}

.illustration {
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: url("../../assets/login.png");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

/* 右侧登录表单区域 */
.right-section {
  flex: 2;
  background: white;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
}

.login-form {
  width: 100%;
  max-width: 400px;
}

.welcome-text {
  text-align: center;
  margin-bottom: 40px;
}

.welcome-text h2 {
  font-size: 28px;
  color: #666;
  margin: 0 0 10px 0;
  font-weight: normal;
}

.welcome-text h1 {
  font-size: 38px;
  color: #2c5aa0;
  margin-bottom: 15px;
  font-weight: bold;
}

.chrome-icon {
  font-size: 14px;
}

.copyright {
  font-size: 11px;
  color: #999;
  text-align: center;
  line-height: 1.5;
  margin-top: 80px;
}

.copyright p {
  margin: 2px 0;
}

</style>